<template>
	<view class="contina">
		<template v-for="item in lists">
			<view class="card w">
				<view class="title">
					{{item.title}}
				</view>
				<view class="list">
					<template v-for="k in item.list">
						<view class="item" @click="toPath(k)">
							<view class="imgBgc">
								<image style="width: 70rpx;height: 70rpx;" :src="k.img"></image>
							</view>
							<view class="text">
								{{k.text}}
							</view>
						</view>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [{
						title: "人才证书管理",
						list: [{
							img: require("@/static/image/money.png"),
							text: '人才库',
							path:'/pagesA/talents/talents'
						}, {
							img: require("@/static/image/money.png"),
							text: '培训管理',
							path:'/pagesA/training/training'
						}, {
							img: require("@/static/image/money.png"),
							text: '人才证书库',
							path:"/pagesA/talentszs/talentszs"
						}, {
							img: require("@/static/image/money.png"),
							text: '证书维护',
							path:"/pagesA/maintain/maintain"
						}, {
							img: require("@/static/image/money.png"),
							text: '证书使用',
							path:"/pagesA/pooluse/pooluse"
						}, {
							img: require("@/static/image/money.png"),
							text: '证书检查',
							path:"/pagesA/inspection/inspection"
						}, {
							img: require("@/static/image/money.png"),
							text: '证书账号',
							path:"/pagesA/account/account"
						}]
					},
					{
						title: "企业证书管理",
						list: [{
							img: require("@/static/image/money.png"),
							text: '企业证书库',
							path:"/pagesA/certificate/certificate"
						}, {
							img: require("@/static/image/money.png"),
							text: '企业证书维护',
							path:"/pagesA/enterprisemainte/enterprisemainte"
						}]
					},
					{
						title: "项目管理",
						list: [{
							img: require("@/static/image/money.png"),
							text: '项目管理',
							path:"/pagesA/projectm/projectm"
						}, {
							img: require("@/static/image/money.png"),
							text: '业绩管理',
							path:"/pagesA/performance/performance"
						}]
					},
					{
						title: "投标管理",
						list: [{
							img: require("@/static/image/money.png"),
							text: '投标登记',
							path:"/pagesA/Bid/Bid"
						}, {
							img: require("@/static/image/money.png"),
							text: '投标支出',
							path:"/pagesA/expenditure/expenditure"
						}, {
							img: require("@/static/image/money.png"),
							text: '项目人员'
						}, {
							img: require("@/static/image/money.png"),
							text: '保证金管理',
							path:"/pagesA/deposit/deposit"
						}, {
							img: require("@/static/image/money.png"),
							text: '保证金回收',
							path:"/pagesA/recovery/recovery"
						}, {
							img: require("@/static/image/money.png"),
							text: '保证金汇总',
							path:"/pagesA/summary/summary"
						}, {
							img: require("@/static/image/money.png"),
							text: '开标登记',
							path:"/pagesA/openbids/openbids"
						} ,{
							img: require("@/static/image/money.png"),
							text: '中标结果',
							path:"/pagesA/result/result"
						}]
					},{
						title: "服务中心",
						list: [{
							img: require("@/static/image/money.png"),
							text: '建筑培训'
						}, {
							img: require("@/static/image/money.png"),
							text: '学历提升'
						}]
					}
				]
			}
		},
		methods: {
			toPath(row){
				uni.navigateTo({
					url:row.path
				})
			}
		}
	}
</script>

<style lang="scss">
	.contina {
		.card {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;


				.item {
					width: 155rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 19rpx;
					margin-bottom: 30rpx;

					.imgBgc {
						width: 98rpx;
						height: 98rpx;
						background: #E7EEFD;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
						margin-top: 10rpx;
					}
				}

				.item:nth-child(4) {
					margin-right: 0;
				}
			}

		}
	}
</style>
